<!--
 * @author: Kate-sy
 * @create: 2021-06-22 12:46 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-30 19:25 PM
 * @desc: 
-->
<template>
  <div class="hot-wrap">
    <div
      class="hot-item"
      :key="item.article_id"
      v-for="item in data"
      @click="hotitemClick(item)"
    >
      <div class="time">
        <div class="time-left">
          <div class="anther">{{ item.nick_name }}</div>
          <div class="times">{{ item.updated_at }}</div>
        </div>
        <div class="time-right" :style="{ display: hottag }">
          <div class="tagitem" :key="ite.tag_name" v-for="ite in item.tags">
            {{ ite.tag_name }}
          </div>
        </div>
      </div>
      <div class="itbo-tile">{{ item.title }}</div>
      <div class="item-body">
        <div class="itdody-left">
          <div class="itdesc" v-html="item.describe"></div>
          <div class="iteicon">
            <div class="praise" @click="look">
              <svg
                t="1624343705331"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7934"
                width="16"
                height="16"
              >
                <path
                  d="M223.3 519.7v400h-100v-400h100m40-40h-180v480h180v-480z m230.8-375.4c2.5 0 5.2 0.1 8 0.4 35.6 3.5 60.9 15.1 77.2 35.6 11.4 14.3 18.9 33.5 22.2 57.2 2.8 20.1 2.6 42.8-0.5 67.6-6.5 50.3-7.6 90.6-3.2 119.8 8.1 54.6 36.6 66.4 52.9 68.6 4.8 0.6 9.9 1 15.8 1 16.9 0 37.8-2.7 61.9-5.7 28.6-3.6 60.9-7.8 90.6-7.8 44.8 0 63.6 9.6 71.5 17.7 2.7 2.8 10.9 11.2 10.2 36.3-0.6 21.4-2.3 41.8-4 61.5-1.7 19.9-3.3 38.8-3.6 57.2-1.6 103.4-6.6 154.9-17.9 183.7-21.9 55.9-47.6 69.8-83.1 89-4.8 2.6-9.7 5.2-14.7 8.1-29 16.3-64.5 18.7-83.1 18.7-10 0-16.5-0.7-17.3-0.8l-2.1-0.3h-2.5l-409.2-1.8V539.7c36.5-17.5 100.9-57 148-133.8 36.6-59.7 41-131.1 44.9-194.1 2.2-35.7 4.3-69.5 12.3-90.1 2.6-6.6 5.5-11.2 8.7-13.5 3.6-2.6 9.3-3.9 17-3.9m0-40c-119.9 0-43.3 200.5-116.9 320.6C316.4 484.2 223.3 513 223.3 513v437.2l449 2s8.6 1.1 22.1 1.1c24.9 0 66.6-3.6 102.7-23.9 42.6-24 84.8-39.1 115.4-117.3 14-35.7 19-92.4 20.6-197.7 0.5-34.8 6.4-73.9 7.5-118.3 2-77.2-56.2-95.1-121.7-95.1-56.9 0-119.3 13.5-152.5 13.5-3.9 0-7.4-0.2-10.4-0.6-16.4-2.2-28.4-42.9-15.4-143.7 9.6-74.2 2.1-192-134.7-205.3-4.1-0.4-8.1-0.6-11.8-0.6z"
                  fill="#86909c"
                  p-id="7935"
                ></path></svg
              >361
            </div>
            <div class="tock" @click="look">
              <svg
                t="1624344834578"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="28041"
                width="16"
                height="16"
              >
                <path
                  d="M691.4048 850.7904A329.8304 329.8304 0 0 1 650.24 870.4a384 384 0 1 1 216.9856-212.1728l-1.536 3.584c-5.376 12.5952-10.752 22.8864-14.1824 28.672-10.496 19.3536-13.3632 47.104-7.168 67.328l37.7856 122.4192c2.304 7.5776 5.6832 4.1472-1.8432 1.8432l-122.4192-37.7856c-19.968-6.144-47.616-3.4304-66.4064 6.5024z m173.7216 80.1792c47.0016 14.4896 80.2816-19.0976 65.8432-65.8432l-37.7344-122.368a44.2368 44.2368 0 0 1 2.816-27.0848c3.9936-6.7584 10.2912-18.8416 16.64-33.6384l1.8432-4.3008a435.2 435.2 0 1 0-231.5776 234.496c13.9776-6.1952 25.7536-12.3392 33.1776-16.5888a45.2096 45.2096 0 0 1 26.624-2.4064l122.368 37.7344z"
                  fill="#86909c"
                  p-id="28042"
                ></path>
              </svg>
              330
            </div>
            <div class="sher" @click="look">
              <svg
                t="1624345296745"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1212"
                width="16"
                height="16"
              >
                <path
                  d="M665.6 243.2c-6.4 0-12.8 0-12.8-6.4l-134.4-128h-12.8L371.2 243.2c-6.4 6.4-19.2 6.4-25.6 0s-6.4-19.2 0-25.6l134.4-134.4c19.2-19.2 44.8-19.2 64 0l134.4 134.4c6.4 6.4 6.4 19.2 0 25.6h-12.8z"
                  fill="#86909c"
                  p-id="1213"
                ></path>
                <path
                  d="M512 678.4c-12.8 0-19.2-6.4-19.2-19.2V96c0-12.8 6.4-19.2 19.2-19.2s19.2 6.4 19.2 19.2v556.8c0 12.8-6.4 25.6-19.2 25.6z"
                  fill="#86909c"
                  p-id="1214"
                ></path>
                <path
                  d="M819.2 960H204.8C128 960 64 902.4 64 832V448c0-70.4 64-128 140.8-128H384c12.8 0 19.2 6.4 19.2 19.2s-6.4 19.2-19.2 19.2H204.8c-57.6 0-102.4 38.4-102.4 89.6v384c0 51.2 44.8 89.6 102.4 89.6h614.4c57.6 0 102.4-38.4 102.4-89.6V448c0-51.2-44.8-89.6-102.4-89.6h-153.6c-12.8 0-19.2-6.4-19.2-19.2s6.4-19.2 19.2-19.2h153.6C896 320 960 377.6 960 448v384c0 70.4-64 128-140.8 128z"
                  fill="#86909c"
                  p-id="1215"
                ></path>
              </svg>
              分享
            </div>
          </div>
        </div>
        <div class="itbody-right" v-show="item.pic">
          <img :src="item.pic" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Hotitem",
  props: {
    hottag: String,
    data: Array,
  },
  data() {
    return {};
  },
  methods: {
    look() {
      this.$store.commit("judgeLogin");
    },
    hotitemClick(data) {
      console.log(data.article_id);
      this.$router.push({
        path: "Detail",
        query: { da: data, id: data.article_id,quserid:data.user_id },
      });
      console.log(data.user_id);
    },
  },
};
</script>
<style lang="scss" scoped>
.hot-wrap {
  width: 100%;
  .hot-item {
    padding: 0px 20px;
    border-bottom: 1px solid #f4f4f4;
    padding-top: 10px;
    padding-bottom: 16px;
    &:hover {
      background-clip: padding-box;
      background-color: #fafafa;
      cursor: pointer;
    }
    .time {
      @include flex(space-between, center);
      height: 22px;
      margin-bottom: 13px;
      .time-left {
        @include flex(none, center);
        .anther {
          width: 70px;
          @include onerow();
          border-right: 1px solid #e5e6eb;
          text-align: left;
          margin-right: 10px;
          @include font(13px, #4e5969);
        }
        .times {
          @include font(14px, #86909c);
        }
      }
      .time-right {
        @include flex(none, center);
        .tagitem {
          @include font(14px, #4e5969);
          padding: 2px 5px;
          background-color: #fafafa;
          margin-left: 8px;
          border-radius: 2px;
          &:hover {
            background-color: #e5e6eb;
            cursor: pointer;
          }
        }
      }
    }
    .itbo-tile {
      text-align: left;
      margin-bottom: 10px;
      @include font(18px, #1d2129, 700);
    }
    .item-body {
      @include flex(space-between);
      .itdody-left {
        height: 80px;
        .itdesc {
          text-align: left;
          width: 450px;
          height: 45px;
          margin-top: -5px;
          @include font(14px, #4e5969);
          line-height: 22px;
          @include hidden(2);
          overflow: hidden;
          word-break: break-all;
        }
        .iteicon {
          height: 20px;
          margin-top: 21px;
          @include flex(none, center);
          .praise {
            height: 20px;
            font-size: 14px;
            color: #86909c;
            margin-right: 20px;
            @include flex(none, center);
            svg {
              margin-right: 6px;
            }
          }
          .tock {
            @extend .praise;
          }
          .sher {
            @extend .praise;
          }
        }
      }
      .itbody-right {
        width: 142px;
        height: 80px;
        margin-left: 4px;
        img {
          @extend .itbody-right;
        }
      }
    }
  }
}
@media screen and (max-width: 960px) {
  .item-body {
    flex-grow: 1;
    .itdody-left {
      flex-grow: 1;
    }
  }
}
</style>